<template>
  <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" :scroll-wheel-zoom="true">
    <bm-polygon :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolygonPath"/>
  </baidu-map>
</template>
<script>
  // 注册所有的百度地图组件
  import Vue from "vue";
  import BaiduMap from "vue-baidu-map";

  Vue.use(BaiduMap, {
    ak: 'HQ7GzsIr9jkNWsFY6fMOsChIW3NSMnRk'
  })
  export default {
    name: 'operationalArea',
    data () {
      return {
        polygonPath: [
          {lng: 116.412732, lat: 39.911707},
          {lng: 116.39455, lat: 39.910932},
          {lng: 116.403461, lat: 39.921336}
        ]
      }
    },
    methods: {
      updatePolygonPath (e) {
        this.polygonPath = e.target.getPath()
      },
      addPolygonPoint () {
        this.polygonPath.push({lng: 116.404, lat: 39.915})
      }
    },
    created () {
    }
  }
</script>
<style>

</style>
